<template>
  <div class>
    <div class="ba_f outmain">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>筛选条件</span>
        </div>
      </div>
      <el-form :inline="false" :model="form" class="demo-form-inline" label-width="100px">
        <div class="flex ba_f">
          <el-form-item label="查询日期：" class="mar_t20">
            <div class="flex-bet">
              <div>
                <el-radio-group v-model="form.timeType" @change="selectType">
                  <el-radio-button label="1">今天</el-radio-button>
                  <el-radio-button label="2">近七天</el-radio-button>
                  <el-radio-button label="3">近十五天</el-radio-button>
                  <el-radio-button label="4">自定义时间</el-radio-button>
                </el-radio-group>
                <span class="mar_l20" v-if="form.timeType=='4'">
                <el-date-picker v-model="form.time" type="daterange" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" format="yyyy年MM月dd日" :picker-options="pickerOptions" @change="selectType"></el-date-picker>
              </span>
              </div>
            </div>
          </el-form-item>
        </div>
        <div class="flex ba_f">
          <el-form-item label="选择店铺：">
            <div class="mar_l20">
              <el-select v-model="form.shopValue" placeholder="请选择" @change="changeStore">
                <el-option v-for="item in options" :key="item.id" :label="item.name+'(ID:'+item.id+')'"
                           :value="item.id"></el-option>
              </el-select>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
<!--    <div class="mar_t20 ba_f outmain">-->
<!--      <div class="shuju_title">-->
<!--        <div class="shuju_title_text">-->
<!--          <span>门店账户</span>-->
<!--        </div>-->
<!--        &lt;!&ndash;                <div class="fon_12 ab r0 mar_r10 color_9">更新时间：2020-09-04 13:32:59</div>&ndash;&gt;-->
<!--      </div>-->
<!--      <div class="main-icon flex t_l mar_t20">-->
<!--        <div class="flex-1 t_l pad_20">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="title6 fon_14">可提现余额（元）</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.money || 0}}</p>-->
<!--              &lt;!&ndash;                            <p class="fon_12 title6 lh25">较前一日：{{zhData.todayMoney}}</p>&ndash;&gt;-->
<!--            </div>-->
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">可提现余额:指门店可提现的金额</div>-->
<!--                <button type="button" class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span>-->
<!--                    <i class="el-icon-question"></i>-->
<!--                  </span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex-1 t_l pad_20">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="title6 fon_14">待结算金额（元）</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.waitMoney || 0}}</p>-->
<!--              &lt;!&ndash;                            <p class="fon_12 title6 lh25">较前一日：{{zhData.newYu}}</p>&ndash;&gt;-->
<!--            </div>-->
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">待结算金额:指门店订单待完成的订单总额</div>-->
<!--                <button type="button" class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span>-->
<!--                    <i class="el-icon-question"></i>-->
<!--                  </span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex-1 t_l pad_20">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="title6 fon_14">门店总金额（元）</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.allMoney || 0}}</p>-->
<!--              &lt;!&ndash;                            <p class="fon_12 title6 lh25">较前一日：{{zhData.newDong}}</p>&ndash;&gt;-->
<!--            </div>-->
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">门店总金额=可提现金额+待结算金额</div>-->
<!--                <button type="button" class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span>-->
<!--                    <i class="el-icon-question"></i>-->
<!--                  </span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex-1 t_l pad_20">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="title6 fon_14">已提现金额（元）</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.financeMoney || 0}}</p>-->
<!--              &lt;!&ndash;                            <p class="fon_12 title6 lh25">较前一日：{{zhData.newDong}}</p>&ndash;&gt;-->
<!--            </div>-->
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">已提现金额（元）:指门店已提现到账的金额</div>-->
<!--                <button type="button" class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span>-->
<!--                    <i class="el-icon-question"></i>-->
<!--                  </span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex-1 t_l pad_20">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="title6 fon_14">累计收入（元）</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.cumulative || 0}}</p>-->
<!--              &lt;!&ndash;                            <p class="fon_12 title6 lh25">较前一日：{{zhData.newTx}}</p>&ndash;&gt;-->
<!--            </div>-->
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">累计收入=门店总金额+已提现金额</div>-->
<!--                <button type="button" class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span>-->
<!--                    <i class="el-icon-question"></i>-->
<!--                  </span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class="t_r mar_t20">-->
<!--      <div class="fon_12 mar_r10 color_9">-->
<!--        <span class="fon_14 color_3">时间筛选：</span>-->
<!--        &lt;!&ndash;                <el-select v-model="form.timeType" placeholder="请选择">&ndash;&gt;-->
<!--        &lt;!&ndash;                    <el-option label="自然日" value="1"></el-option>&ndash;&gt;-->
<!--        &lt;!&ndash;                    <el-option label="自然月" value="2"></el-option>&ndash;&gt;-->
<!--        &lt;!&ndash;                </el-select>&ndash;&gt;-->
<!--        &lt;!&ndash;                <el-date-picker&ndash;&gt;-->
<!--        &lt;!&ndash;                        v-model="form.time"&ndash;&gt;-->
<!--        &lt;!&ndash;                        type="date"&ndash;&gt;-->
<!--        &lt;!&ndash;                        placeholder="选择日期"&ndash;&gt;-->
<!--        &lt;!&ndash;                        class="mar_l10"&ndash;&gt;-->
<!--        &lt;!&ndash;                        v-if="form.timeType=='1'"&ndash;&gt;-->
<!--        &lt;!&ndash;                        @change="changeTime">&ndash;&gt;-->
<!--        &lt;!&ndash;                </el-date-picker>&ndash;&gt;-->
<!--        <el-date-picker v-model="form.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy年MM月dd日" class="mar_l10" @change="changeTime"></el-date-picker>-->
<!--        &lt;!&ndash;                <el-date-picker&ndash;&gt;-->
<!--        &lt;!&ndash;                        v-model="form.Mtime"&ndash;&gt;-->
<!--        &lt;!&ndash;                        type="month"&ndash;&gt;-->
<!--        &lt;!&ndash;                        placeholder="选择月"&ndash;&gt;-->
<!--        &lt;!&ndash;                        class="mar_l10"&ndash;&gt;-->
<!--        &lt;!&ndash;                        value-format=yyyy-MM&ndash;&gt;-->
<!--        &lt;!&ndash;                        v-if="form.timeType=='2'"&ndash;&gt;-->
<!--        &lt;!&ndash;                        @change="changeTime">&ndash;&gt;-->
<!--        &lt;!&ndash;                </el-date-picker>&ndash;&gt;-->
<!--      </div>-->
<!--    </div>-->

<!--    <div class="mar_t10 ba_f outmain">-->
<!--      <div class="shuju_title">-->
<!--        <div class="shuju_title_text">-->
<!--          <span>实时概况</span>-->
<!--        </div>-->
<!--        &lt;!&ndash;                <div class="fon_12 ab r0 mar_r10 color_9">更新时间：2020-09-04 13:32:59</div>&ndash;&gt;-->
<!--      </div>-->
<!--      <div class="flex-bet">-->
<!--        <div class="bflex-5">-->
<!--          <div class="pad_20">-->
<!--            <p class="title6 fon_14 wei">营业额</p>-->
<!--            <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.allMoney || 0}}</p>-->
<!--          </div>-->
<!--          <div id="shujuEch" style="height: 360px;width: 100%"></div>-->
<!--        </div>-->
<!--        <div class="bflex-5 pad_t_30">-->
<!--          <div class="flex pad_20">-->
<!--            <div class="flex-g-1 flex">-->
<!--              <div class="mar_r20">-->
<!--                <div class="tongji_icon bor_rad50 iconfont iconfangkeshu flex-center color_f" style="background:#7BDCFF"></div>-->
<!--              </div>-->
<!--              <div>-->
<!--                <p class="title6 fon_14 wei">用户实付金额</p>-->
<!--                <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.payMoney || 0}}</p>-->
<!--                <p class="fon_12 title6 lh25" style="color: #fff">昨日全天：0</p>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="flex-g-1 flex">-->
<!--              <div class="mar_r20">-->
<!--                <div class="tongji_icon bor_rad50 iconfont iconliulan flex-center color_f" style="background:#FFE934"></div>-->
<!--              </div>-->
<!--              <div>-->
<!--                <p class="title6 fon_14 wei">预计收入</p>-->
<!--                <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.cumulative || 0}}</p>-->
<!--                <p class="fon_12 title6 lh25" style="color: #fff">昨日全天：0</p>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="flex pad_20">-->
<!--            <div class="flex-g-1 flex">-->
<!--              <div class="mar_r20">-->
<!--                <div class="tongji_icon iconfont iconzhifurenshu bor_rad50 flex-center color_f" style="background:#009AFE"></div>-->
<!--              </div>-->
<!--              <div>-->
<!--                <p class="title6 fon_14 wei">付款人数</p>-->
<!--                <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.payNum || 0}}</p>-->
<!--                <p class="fon_12 title6 lh25" style="color: #fff">昨日全天：0</p>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="flex-g-1 flex">-->
<!--              <div class="mar_r20">-->
<!--                <div class="tongji_icon bor_rad50 iconfont iconzhifudingdanshu flex-center color_f" style="background:#11CD6E"></div>-->
<!--              </div>-->
<!--              <div>-->
<!--                <p class="title6 fon_14 wei">有效订单数</p>-->
<!--                <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.orderNum || 0}}</p>-->
<!--                <p class="fon_12 title6 lh25" style="color: #fff">昨日全天：0</p>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="flex pad_20 wid">-->
<!--            <div class="flex-g-1 flex wid50">-->
<!--              <div class="mar_r20">-->
<!--                <div class="tongji_icon bor_rad50 iconfont icontuikuan flex-center color_f" style="background:#F85959"></div>-->
<!--              </div>-->
<!--              <div>-->
<!--                <p class="title6 fon_14 wei">取消/退款订单</p>-->
<!--                <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.refundCount || 0}}</p>-->
<!--                <p class="fon_12 title6 lh25">取消/退款金额：{{jeData.refundMoney || 0}}</p>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="flex-g-1 flex wid50">-->
<!--              <div class="mar_r20">-->
<!--                <div class="tongji_icon bor_rad50 iconfont iconkedanjia flex-center color_f" style="background:#FEB822"></div>-->
<!--              </div>-->
<!--              <div>-->
<!--                <p class="title6 fon_14 wei">其他订单</p>-->
<!--                <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.otherNum || 0}}</p>-->
<!--                <p class="fon_12 title6 lh25" style="color: #fff">其他营收金额：0</p>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
    <div class="mar_t20 ba_f outmain">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>整体看板</span>
        </div>
        <!--                <div class="fon_12 ab r0 mar_r10 color_9">更新时间：2020-09-04 13:32:59</div>-->
      </div>
      <div class="main-icon flex t_l mar_t20">
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">营业总额</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ jeData.allMoney || 0 }}</p>
              <p class="fon_12 title6 lh25 yc">无</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">预计收入</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ jeData.estimate || 0 }}</p>
              <p class="fon_12 title6 lh25">服务费支出：{{ jeData.commission || 0 }}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">有效订单</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ jeData.effective || 0 }}</p>
              <p class="fon_12 title6 lh25">客单价：{{ jeData.unitPrice || 0 }}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">无效订单</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ jeData.invalidCount || 0 }}</p>
              <p class="fon_12 title6 lh25 color_f">损失金额：{{ jeData.invalidMoney || 0 }}</p>
            </div>
          </div>
        </div>
      </div>
      <div id="zhentiEch" style="height: 360px;" class="mar_t20"></div>
    </div>
<!--    <div class="mar_t20 ba_f outmain">-->
<!--      <div class="shuju_title">-->
<!--        <div class="shuju_title_text">-->
<!--          <span>整体看板</span>-->
<!--        </div>-->
<!--        &lt;!&ndash;                <div class="fon_12 ab r0 mar_r10 color_9">更新时间：2020-09-04 13:32:59</div>&ndash;&gt;-->
<!--      </div>-->
<!--      <div class="main-icon flex t_l mar_t20">-->
<!--        <div class="flex-1 t_l pad_20 bortColor">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="title6 fon_14">用户实付金额</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.payMoney || 0}}</p>-->
<!--              &lt;!&ndash; <p class="fon_12 title6 lh25 color_f">较前一日：0</p> &ndash;&gt;-->
<!--            </div>-->
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">统计周期内有效订单的总计金额，包含商品销售额+包装销售额+配送费+活动补贴</div>-->
<!--                <button type="button" class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span>-->
<!--                    <i class="el-icon-question"></i>-->
<!--                  </span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex-1 t_l pad_20 bortColor">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="title6 fon_14">有效订单数</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.orderNum || 0}}</p>-->
<!--              &lt;!&ndash; <p class="fon_12 title6 lh25 color_f">较前一日：0</p> &ndash;&gt;-->
<!--            </div>-->
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">统计时间内，未取消且未发生退款的订单量</div>-->
<!--                <button type="button" class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span>-->
<!--                    <i class="el-icon-question"></i>-->
<!--                  </span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex-1 t_l pad_20 bortColor">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="title6 fon_14">付款人数</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.payNum || 0}}</p>-->
<!--              &lt;!&ndash; <p class="fon_12 title6 lh25 color_f">较前一日：0</p> &ndash;&gt;-->
<!--            </div>-->
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">统计周期内，付款成功的用户数，一人多次结算记为一人</div>-->
<!--                <button type="button" class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span>-->
<!--                    <i class="el-icon-question"></i>-->
<!--                  </span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex-1 t_l pad_20 bortColor">-->
<!--          <div class="flex-bet flex-y-top">-->
<!--            <div>-->
<!--              <p class="title6 fon_14">客单价</p>-->
<!--              <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.price || 0}}</p>-->
<!--              &lt;!&ndash; <p class="fon_12 title6 lh25 color_f">较前一日：0</p> &ndash;&gt;-->
<!--            </div>-->
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">客单价</div>-->
<!--                <button type="button" class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span>-->
<!--                    <i class="el-icon-question"></i>-->
<!--                  </span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div id="zhentiEch" style="height: 360px;" class="mar_t20"></div>-->
<!--    </div>-->
    <div class="mar_t20 ba_f outmain pad_20">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>浏览概况</span>
        </div>
      </div>
      <div class="flex-bet">
        <div class="bflex-7 outmain" style="height: 390px;">
          <div id="zhentiEch3" style="height:360px"></div>
        </div>
        <div class="bflex-3">
          <div class="flex-bet pad_20 flex-y-top">
            <div>
              <p class="color_9 fon_14">浏览量(pv)</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{jeData.visitCount || 0}}</p>
<!--              <div class="flex">-->
<!--                <p class="fon_12 color_9 lh25">全部 {{jeData.visitTotal || 0}}</p>-->
<!--              </div>-->
            </div>
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">浏览量</div>-->
<!--                <button type="button" class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span>-->
<!--                    <i class="el-icon-question"></i>-->
<!--                  </span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
          </div>
          <div class="flex-bet pad_20 flex-y-top mar_t20">
            <div>
              <p class="color_9 fon_14">访客数(uv)</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{jeData.userCount || 0}}</p>
<!--              <div class="flex">-->
<!--                <p class="fon_12 color_9 lh25">全部 {{jeData.userTotal || 0}}</p>-->
<!--              </div>-->
            </div>
<!--            <div class="toolTip">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">访客数</div>-->
<!--                <button type="button" class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span>-->
<!--                    <i class="el-icon-question"></i>-->
<!--                  </span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
          </div>
        </div>
      </div>
    </div>
    <div class="outmain pad_20 ba_f bor_rad5 mar_t20">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>订单概况</span>
        </div>
      </div>
      <div class="main-icon flex t_l mar_t20">
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">外卖有效订单</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ dddata.outCount || 0 }}</p>
              <p class="fon_12 title6 lh25">营业金额：{{ dddata.outMoney || 0 }}</p>
              <p class="fon_12 title6 lh25">退款售后订单：{{ dddata.outRefundMoney || 0 }}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">堂食有效订单</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ dddata.inCount || 0 }}</p>
              <p class="fon_12 title6 lh25">营业金额：{{ dddata.inMoney  || 0}}</p>
              <p class="fon_12 title6 lh25">退款售后订单：{{ dddata.inRefundMoney  || 0}}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">快餐有效订单</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ dddata.fastCount  || 0}}</p>
              <p class="fon_12 title6 lh25">营业金额：{{ dddata.fastMoney  || 0}}</p>
              <p class="fon_12 title6 lh25">退款售后订单：{{ dddata.fastRefundMoney  || 0}}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">当面付有效订单</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ dddata.payFaceCount  || 0}}</p>
              <p class="fon_12 title6 lh25">营业金额：{{ dddata.payFaceMoney  || 0}}</p>
              <p class="fon_12 title6 lh25 yc">退款售后订单：{{ dddata.payFaceRefundMoney  || 0}}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">其他订单</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ dddata. otherCount  || 0}}</p>
              <p class="fon_12 title6 lh25">营业金额：{{ dddata.otherMoney || 0}}</p>
              <p class="fon_12 title6 lh25 yc">退款售后订单：{{ dddata.otherCount  || 0}}</p>
            </div>
          </div>
        </div>
        <!--        <div class="flex-1 t_l pad_20 borderBG">-->
        <!--          <div class="flex-bet flex-y-top">-->
        <!--            <div>-->
        <!--              <p class="title6 fon_14">售后/维权订单</p>-->
        <!--              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ dddata.safeCount }}</p>-->
        <!--              <p class="fon_12 title6 lh25">外卖订单：{{ dddata.safeOkCount }}</p>-->
        <!--              <p class="fon_12 title6 lh25">预约订单：{{ dddata.beSafeCount }}</p>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
    </div>
    <div class="mar_t20">
      <div class="mar_t20 flex-bet">
        <div class="flex-g-1 ba_f pad_20 bor_rad5">
          <div class="shuju_title">
            <div class="shuju_title_text">
              <span>订单来源</span>
            </div>
          </div>
          <div id="mainEch32" class="mar_r20" style="height: 280px;width:380px;margin-top: 40px"></div>
        </div>
        <div class="flex-g-1 ba_f mar_lr20 pad_20 bor_rad5">
          <div class="shuju_title">
            <div class="shuju_title_text">
              <span>订单渠道</span>
            </div>
          </div>
          <div id="mainEch33" class="mar_r20" style="height: 280px;width:380px;margin-top: 40px"></div>
        </div>
        <div class="flex-g-1 ba_f pad_20 bor_rad5">
          <div class="shuju_title">
            <div class="shuju_title_text">
              <span>支付占比</span>
            </div>
          </div>
          <div id="mainEch34" class="mar_r20" style="height: 280px;width:380px;margin-top: 40px"></div>
        </div>
      </div>
    </div>
<!--    <div class="mar_t20 pad_20 ba_f outmain">-->
<!--      <div class="shuju_title">-->
<!--        <div class="shuju_title_text">-->
<!--          <span>商品看板</span>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="mar_t20 flex-bet">-->
<!--        <div class="flex-g-1" style="height: 520px;">-->
<!--          <div class="flex t_l">-->
<!--            <div class="title35">销量TOP10商品</div>-->
<!--            <div class="toolTip mar_l10">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">统计周期内，门店销量排行前10的商品</div>-->
<!--                <button type="button" class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span>-->
<!--                    <i class="el-icon-question"></i>-->
<!--                  </span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="mar_t10 shuju_table">-->
<!--            <el-table :data="tableData" stripe style="width: 100%">-->
<!--              <el-table-column type="index" label="排名"></el-table-column>>-->
<!--              <el-table-column prop="name" label="商品名称"></el-table-column>>-->
<!--              <el-table-column prop="num" label="商品销量数"></el-table-column>-->
<!--              <el-table-column prop="money" label="销售额"></el-table-column>-->
<!--            </el-table>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="flex-g-1 mar_l20" style="height: 520px;">-->
<!--          <div class="flex t_l">-->
<!--            <div class="title35">支付TOP10商品</div>-->
<!--            <div class="toolTip mar_l10">-->
<!--              <el-tooltip effect="dark" placement="top">-->
<!--                <div slot="content">统计周期内，门店支付排行前10的商品</div>-->
<!--                <button type="button" class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                  <span>-->
<!--                    <i class="el-icon-question"></i>-->
<!--                  </span>-->
<!--                </button>-->
<!--              </el-tooltip>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="mar_t10 shuju_table">-->
<!--            <el-table :data="tableData2" stripe style="width: 100%">-->
<!--              <el-table-column type="index" label="排名"></el-table-column>>-->
<!--              <el-table-column prop="name" label="商品名称"></el-table-column>>-->
<!--              <el-table-column prop="money" label="销售额"></el-table-column>-->
<!--              <el-table-column prop="num" label="商品销量"></el-table-column>-->
<!--            </el-table>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>
<script>
import echarts from 'echarts';
import { getRecordData, realRecord } from '@/api/statistics';
import { changeDate } from '@/utils/index';
import { mapState } from 'vuex';
export default {
  mounted() {
    this.bus.$emit('loading', true);
    this.init();
    this.mainEch32();
    this.mainEch33();
    this.mainEch34();
    window.addEventListener('resize', this.initchart);
  },
  created() {
    this.form.shopValue = this.market[0].id;
    this.options = this.market;
  },
  data() {
    return {
      selectData: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectData = minDate.getTime()
          if (maxDate) {
            this.selectData = ''
          }
        },
        disabledDate: (time) => {
          if (!this.isNull(this.selectData)) {
            var date = new Date(this.selectData)
            return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth()
          } else {
            return false
          }
        }
      },
      dddata: {},
      zhData: {},
      jeData: {},
      jyData: {},
      form: {
        shopValue: '',
        timeType: '1',
        time: [new Date(), new Date()],
        Mtime: ''
      },
      options: [
        {
          value: '1',
          label: '全部'
        }
      ],
      options2: [
        {
          value: '1',
          label: '自然日'
        }
        // {
        //     value: '2',
        //     label: '自然月'
        // }
      ],
      tableData: [],
      tableData2: [],
      echarts1_option: {
        color: ['#4284ED', '#42CCF0'],
        tooltip: {
          trigger: 'axis'
        },
        // tooltip: {
        //     trigger: 'axis',
        //     formatter: (params)=> {
        //         // console.log(params,666)
        //         var time ='时间：'+ (Number(params[0].name)-1)+':00' +'~'+ Number(params[0].name)+':00';
        //         for(var i=0 ; i < params.length;i++){
        //             var numbers = '</br>' +params[i].seriesName+ '：'+params[i].value;
        //             time+=numbers
        //         }
        //         return time
        //     }
        // },
        legend: {
          data: ['营业额']
        },
        grid: {
          left: '3%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          // 去除坐标轴上的刻度线
          axisTick: {
            show: false,
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          },
          // x轴的字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          // x轴的颜色和宽度
          axisLine: {
            lineStyle: {
              color: '#f7f7f7',
              width: 2 //这里是坐标轴的宽度,可以去掉
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#DDDDDD'
            },
            show: true
          }
        },
        series: [
          {
            name: '营业额',
            type: 'bar',
            data: []
          }
        ]
      },
      echarts2_option: {
        color: ['#4284ED', '#42CCF0', '#1890FF', '#2FC25B', '#4284ED'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          // data: ['支付金额', '支付订单数', '支付人数', '客单价', '支付会员数']
          data: ['营业总额', '预计收入', '有效订单', '无效订单']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // 去除坐标轴上的刻度线
          axisTick: {
            show: false,
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          },
          // x轴的字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          // x轴的颜色和宽度
          axisLine: {
            lineStyle: {
              color: '#f7f7f7',
              width: 2 //这里是坐标轴的宽度,可以去掉
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#DDDDDD'
            },
            show: true
          }
        },
        series: [
          {
            name: '营业总额',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: []
          },
          {
            name: '预计收入',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: []
          },
          {
            name: '有效订单',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: []
          },
          {
            name: '无效订单',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: []
          },
        ]
      },
      echarts3_option: {
        color: ['#4284ED', '#42CCF0'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['浏览量', '访客数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // 去除坐标轴上的刻度线
          axisTick: {
            show: false,
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          },
          // x轴的字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          // x轴的颜色和宽度
          axisLine: {
            lineStyle: {
              color: '#f7f7f7',
              width: 2 //这里是坐标轴的宽度,可以去掉
            }
          },
          data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
        },
        yAxis: {
          type: 'value',
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#DDDDDD'
            },
            show: true
          }
        },
        series: [
          {
            name: '浏览量',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: [10, 32, 25, 15, 40, 15, 20, 10, 22, 30, 25]
          },
          {
            name: '访客数',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: [80, 22, 20, 10, 25, 35, 20, 10, 64, 20, 90]
          }
        ]
      },
      echarts32_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['微信小程序', '支付宝小程序', '收银台']
        },
        series: [
          {
            name: '支付金额',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '微信小程序'},
              {value: 20.00, name: '支付宝小程序'},
              {value: 20.00, name: '收银台'},
            ],
          }
        ]
      },
      echarts33_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['堂食', '快餐',]
        },
        series: [
          {
            name: '支付金额',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '堂食'},
              {value: 20.00, name: '快餐'},
            ],
          }
        ]
      },
      echarts34_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['微信支付', '支付宝支付', '余额支付', '现金支付', '自有支付方式']
        },
        series: [
          {
            name: '支付金额',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '微信支付'},
              {value: 20.00, name: '支付宝支付'},
              {value: 20.00, name: '余额支付'},
              {value: 20.00, name: '现金支付'},
              {value: 20.00, name: '自有支付方式'},
            ],
          }
        ]
      },
    };
  },
  computed: {
    ...mapState(['market'])
  },
  methods: {
    init() {
      this.recordData();
      this.realRecord();
    },
    initchart() {
      let myChart1 = echarts.init(document.getElementById('shujuEch'));
      let myChart2 = echarts.init(document.getElementById('zhentiEch'));
      let myChart3 = echarts.init(document.getElementById('zhentiEch3'));
      myChart1.resize();
      myChart2.resize();
      myChart3.resize();
    },
    async recordData() {
      const { data } = await getRecordData({ storeId: this.form.shopValue });
      if (data) {
        this.zhData = data;
        this.bus.$emit('loading', false);
      }
    },
    async realRecord() {
      let startTime = '';
      let endTime = '';
      if (this.form.time) {
        startTime = changeDate(this.form.time[0]);
        endTime = changeDate(this.form.time[1]);
      }
      var params = {
        startTime,
        endTime,
        storeId: this.form.shopValue
        // timeType: this.form.timeType,
        // time: this.form.timeType=='1'?this.form.time:this.form.Mtime,
      };
      const { data } = await realRecord(params);
      if (data) {
        this.jeData = data;
        this.tableData = data.moneyTop;
        this.tableData2 = data.payTop;

        // this.echarts1_option.series[0].data = data.moneyArr.map((item) => item.money);
        // this.echarts1_option.xAxis.data = data.moneyArr.map((item) => item.hours);
        // this.shujuEch();

        this.echarts2_option.series[0].data = data.payMoneyArr.map((item) => item.money);
        this.echarts2_option.series[1].data = data.orderNumArr.map((item) => item.money);
        this.echarts2_option.series[2].data = data.payNumArr.map((item) => item.money);
        this.echarts2_option.series[3].data = data.priceArr.map((item) => item.money);
        this.echarts2_option.xAxis.data = data.payMoneyArr.map((item) => item.hours);
        this.zhentiEch();

        this.echarts3_option.series[0].data = data.visitArr.map((item) => item.money);
        this.echarts3_option.series[1].data = data.userArr.map((item) => item.money);
        this.echarts3_option.xAxis.data = data.visitArr.map((item) => item.hours);
        this.zhentiEch3();
      }
    },
    shujuEch() {
      let myChart = echarts.init(document.getElementById('shujuEch'));
      myChart.setOption(this.echarts1_option, true);
    },
    zhentiEch() {
      let myChart = echarts.init(document.getElementById('zhentiEch'));
      myChart.setOption(this.echarts2_option, true);
    },
    zhentiEch3() {
      let myChart = echarts.init(document.getElementById('zhentiEch3'));
      myChart.setOption(this.echarts3_option, true);
    },
    changeTime() {
      this.realRecord();
    },
    mainEch32() {
      let myChart = echarts.init(document.getElementById('mainEch32'))
      myChart.setOption(this.echarts32_option, true)
    },
    mainEch33() {
      let myChart = echarts.init(document.getElementById('mainEch33'))
      myChart.setOption(this.echarts33_option, true)
    },
    mainEch34() {
      let myChart = echarts.init(document.getElementById('mainEch34'))
      myChart.setOption(this.echarts34_option, true)
    },
    changeStore() {
      this.realRecord();
      this.recordData();
    }
  }
};
</script>
<style lang="scss" scoped>
.title6 {
  color: #666;
  font-size: 14px;
}

.title35 {
  color: #353535;
}

.tongji_icon {
  width: 40px;
  height: 40px;
  font-size: 20px;
}
</style>
